<template>
  <div class="ai-powered-insight-card">
    <div class="card-header">
      <h2 class="card-title">AI-Powered Insights</h2>
    </div>

    <div v-for="(insight, index) in insights" :key="index" class="card-content">
      <div class="insight-item">
        <div class="insight-icon">
          <img :src="insight.icon" :alt="insight.title" />
        </div>
        <div class="insight-text">
          <h3 class="insight-title">{{ insight.title }}</h3>
          <p class="insight-description">{{ insight.howhodo }}</p>
          <h3 class="insight-title">{{ insight.description }}</h3>
        </div>
        <div class="insight-date">
          <span>{{ insight.date }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AIPoweredInsightCard",
  data() {
    return {
      insights: [
        {
          icon: require("@/assets/pieIcon/red.png"),
          title: "Negative Trend – Decline in Breakfast-Related Engagement",
          howhodo:
            "Mentions of “#breakfastview” dropped by 37% over the last 2 weeks.",
          description:
            "Consider running a social media campaign showcasing breakfast visuals to regain visibility.",
          date: "14 May 2025",
        },
        {
          icon: require("@/assets/pieIcon/yellow.png"),
          title: "Opportunity – Ocean View Gaining Attention",
          howhodo:
            "#oceanview received 63 mentions with a sentiment score of 8.7.",
          description:
            "Leverage this by updating your Instagram highlights or pinned content.",
          date: "14 May 2025",
        },
        {
          icon: require("@/assets/pieIcon/yellow.png"),
          title: "Neutral Insight – Consistent Share Rate on LinkedIn",
          howhodo:
            "Engagement types on LinkedIn remain steady, with “Shares” making up 45% of actions.",
          description:
            "Continue content formats that encourage reposting and professional engagement.",
          date: "14 May 2025",
        },
        {
          icon: require("@/assets/pieIcon/avatar.png"),
          title: "Guest Feedback – Check-in Experience Highlighted",
          howhodo:
            "“#seamlesscheckin” is the most positively rated hashtag this month (score: 9.1).",
          description:
            "Promote front desk or mobile check-in workflows in future content.",
          date: "14 May 2025",
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
/* 卡片容器 */
.ai-powered-insight-card {
  margin-top: 20px;
  border: 1px solid #cdcccc;
  border-radius: 8px;
  padding: 24px;
  background: #fff;
}

/* 头部样式 */
.card-header {
  margin-bottom: 20px;

  .card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #454545;
  }
}

/* 内容项样式 */
.card-content {
  &:not(:last-child) {
    .insight-item {
      margin-bottom: 12px;
    }
  }
}

.insight-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 图标样式 */
.insight-icon {
  margin-right: 20px;

  img {
    display: block; /* 去除图片底部间隙 */
  }
}

/* 文本内容样式 */
.insight-text {
  flex: 1;
  word-spacing: 1px;

  .insight-title {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: #454545;
  }

  .insight-description {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #454545;
    line-height: 1.5;
  }
}

/* 日期样式 */
.insight-date {
  padding-left: 20px;
  font-size: 14px;
  font-weight: 600;
  color: #454545;
}
</style>
